<template>
    <view class="notice-bar">
        <!-- <image class="icon" src="/static/icons/notice.png" mode="aspectFit"></image> -->
        <view class="notice-content">
            <!-- 少于限制字数时静态显示 -->
            <view v-if="!needScroll" class="notice-text">{{ text }}</view>
            <!-- 超过限制字数时滚动显示 -->
            <view v-else class="notice-text" :style="scrollStyle">
                <text v-for="(item, index) in loopList" :key="index">
                    {{ item }}
                    <text class="spacer">　　　</text>
                </text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'NoticeBar',
    props: {
        text: {
            type: String,
            default: ''
        },
        repeatCount: {
            type: Number,
            default: 2
        },
        limit: {
            type: Number,
            default: 25
        },
        speed: {
            type: Number,
            default: 20
        }
    },
    data() {
        return {
            translateX: 0,
            animationTimer: null,
            loopList: [],
            currentRepeat: 0,
            step: 0.8,
            isAnimating: false
        }
    },
    computed: {
        needScroll() {
            return this.text.length > this.limit
        },
        scrollStyle() {
            return {
                transform: `translateX(${this.translateX}rpx)`,
                transition: this.isAnimating ? 'transform 0.05s linear' : 'none'
            }
        }
    },
    watch: {
        text: {
            immediate: true,
            handler(val) {
                if (val && this.needScroll) {
                    this.loopList = new Array(this.repeatCount).fill(val)
                    this.resetAnimation()
                }
            }
        }
    },
    mounted() {
        if (this.needScroll) {
            this.startAnimation()
        }
    },
    beforeDestroy() {
        this.stopAnimation()
    },
    methods: {
        resetAnimation() {
            this.stopAnimation()
            this.translateX = 0
            this.currentRepeat = 0
            this.isAnimating = false
            this.$nextTick(() => {
                this.startAnimation()
            })
        },
        startAnimation() {
            if (this.animationTimer) return
            
            // 初始停顿1秒
            setTimeout(() => {
                this.isAnimating = true
                this.animate()
            }, 1000)
        },
        animate() {
            if (this.animationTimer) return
            
            const animate = () => {
                this.translateX -= this.step
                const totalWidth = this.getTotalWidth()
                
                // 当一次循环完成时
                if (Math.abs(this.translateX) >= totalWidth / this.repeatCount) {
                    this.currentRepeat++
                    
                    // 如果达到重复次数
                    if (this.currentRepeat >= this.repeatCount) {
                        this.resetAnimation()
                        return
                    }
                    
                    // 否则重置位置并继续
                    this.translateX = 0
                }
                
                this.animationTimer = setTimeout(animate, this.speed)
            }
            
            animate()
        },
        stopAnimation() {
            if (this.animationTimer) {
                clearTimeout(this.animationTimer)
                this.animationTimer = null
            }
        },
        getTotalWidth() {
            // 计算总宽度
            const textWidth = this.loopList.join('').length * 26
            const spacerWidth = this.loopList.length * 80
            return textWidth + spacerWidth
        }
    }
}
</script>

<style lang="scss">
.notice-bar {
    display: flex;
    align-items: center;
    background: #fff7e6;
    padding: 16rpx 24rpx;
    overflow: hidden;
    border-radius: 10rpx;
    
    .icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 16rpx;
        flex-shrink: 0;
    }
    
    .notice-content {
        flex: 1;
        overflow: hidden;
        height: 40rpx;
        position: relative;
        
        .notice-text {
            white-space: nowrap;
            font-size: 26rpx;
            color: #ed6a0c;
            line-height: 40rpx;
            display: inline-block;
            will-change: transform;
            
            .spacer {
                display: inline-block;
                width: 80rpx;
            }
        }
    }
}
</style> 